<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>仓库收货类别</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <link href="../css/mui.picker.css" rel="stylesheet" />
    <link rel="stylesheet" href="../css/mui.poppicker.css" />
    <link rel="stylesheet" href="../css/mui.dtpicker.css" />
    <link rel="stylesheet" href="../css/1px.css" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      #app {
        font-size: 14px;
        box-sizing: border-box;
      }
      
      .flex {
        display: flex;
      }
      /**/
      
      .mui-scroll-wrapper {
        top: 40px;
      }
      /**/
      
      .select-all {
        margin-top: 10px;
        text-indent: 5px;
      }
      
      .select {
        width: 80%;
        margin-left: 5%;
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        position: relative;
      }
      
      .start-time,
      .end-time {
        border: 1px solid #C0C0C0;
        border-radius: 3px;
        line-height: 24px;
        font-size: 14px;
        color: #ACACB4;
        position: relative;
        width: 40%;
      }
      
      .start-time {
        margin-left: 5%;
      }
      
      .select-time {
        flex: 5;
      }
      
      .mui-icon-arrowdown {
        font-size: 14px;
        position: absolute;
        right: 5px;
        top: 5px;
      }
      /**/
      
      .mui-scroll-wrapper {
        top: 40px;
        bottom: 2px;
      }
      /**/
      .page-box:after{
      	height: 0;
      	clear: both;
      	display: block;
      	content: '';
      }
      .apply-bill {
        float: left;
        width: 45%;
        margin-top: 10px;
        margin-left: 3.3%;
        height: 100px;
        font-size: 13px;
        line-height: 22px;
        background-color: #fff;
        padding: 6px 0;
        border: 1px dashed #ccc;
        border-radius: 5px;
      }
      
      .bill-box {
        text-indent: 5px;
        width: 92%;
        margin-left: 4%;
        position: relative;
        
      }
      
      .page-box:after {
        content: '';
        height: 0;
        clear: both;
        display: block;
      }
      /*加载*/
      
      .mui-pull-bottom-pocket {
        visibility: visible;
      }
      
      .mui-pull-bottom-pocket .mui-pull-loading {
        visibility: visible;
      }
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
      mui.init()
    </script>
    <div id="app">
      <div class="flex select-all">
        <div class="select-time">
          <div class="flex">
            <div class="start-time" @click="startTime" v-text="startTime">
              <!--2017-12-1-->
            </div>
            <span style="display: inline-flex;font-size:13px;margin-right: 2%;">至</span>
            <div class="end-time" @click="endTime" v-text="endTime">
              <!--2017-12-22-->
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="page-box">
            <div v-for="(item, index) in pageList" class="apply-bill" @click="storeDetail(item)">
              <div class="bill-box">
                <div v-text="item.operationId"></div>
                <div>货品数量：<span v-text="item.alreadyPickingAmount"></span></div>
                <div>货品款式：<span v-text="item.alreadyPickingStyle"></span></div>
                <div>状态：<span>已收货</span></div>
              </div>
            </div>
          </div>
          <!--加载中-->
        <div class="mui-pull-bottom-pocket">
          <div class="mui-pull" v-text="loadingText"></div>
        </div>
        <!--加载中-->
        </div>
      </div>
    </div>
    <script src="../config.js"></script>
    <script src="../js/mui.picker.js"></script>
    <script src="../js/mui.poppicker.js"></script>
    <script type="text/javascript" src="../js/mui.dtpicker.js"></script>
    <script src="../js/vue.min.js"></script>
    <script>
        var vm = new Vue({
          el: '#app',
          data: {
          	currentShopObj:{},
            startTime: '',
            endTime: '',
            pageNo: 1,
            pageTotal:1,
            storeId: '',
            pageList: [],
            loadingStatus: 0,
            isLoading :false
          },
          created: function(){
          	var vm  = this
          	mui.plusReady(function(){
          		 vm.receiveParams()
          	})
          },
          computed: {
            loadingText: function() {
              var text = ''
              if(this.loadingStatus === 0) {
                text = ''
              } else if(this.loadingStatus === 1) {
                text = '加载中...'
              } else {
                text = '没有更多'
              }
              return text
            }
          },
          mounted: function() {
            this.startTime = new Date().format('yyyy-MM') + '-01'
            this.endTime = new Date().format('yyyy-MM-dd')
            this.bindEvent()
            //滚动
            mui('.mui-scroll-wrapper').scroll({
              scrollY: true,
              bounce: true,
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
            });

          },
          methods: {
            //接收数据
            receiveParams: function() {
              var self = plus.webview.currentWebview();
              this.currentShopObj = self.currentShopObj;
              this.storeId = self.currentShopObj.storeId;
              this.loadData()
            },

            bindEvent: function() {
              //滚动监听
              document.querySelector('.mui-scroll-wrapper').addEventListener('scrollend', function(e) {
                if(e.detail.y <= e.detail.maxScrollY) {
                  if(vm.isLoading === false) {
                    if(++vm.pageNo <= vm.pageTotal) {
                     vm.loadData()
                    } else {
                      vm.loadingStatus = 2
                    }
                  }
                }
              });
              var options = {
                'type': 'date'
              }
              //开始
              var startTimePicker = new mui.DtPicker(options)
              var vm = this
              var startTime = document.querySelector(".start-time")
              startTime.addEventListener('tap', function() {
                startTimePicker.show(function(item) {
                  vm.startTime = item.text
                  vm.pageNo = 1
                  mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
                  vm.loadData()
                })
              })
              //结束时间
              var endTimePicker = new mui.DtPicker({
                'type': 'date'
              })
              var endTime = document.querySelector(".end-time")
              endTime.addEventListener('tap', function() {
                endTimePicker.show(function(item) {
                  endTime.innerText = item.text
                  toTime = item.text
                  pageNo = 1
                  refundList = []
                  mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
                  vm.loadData()
                })
              })
            },
            loadData: function() {
              if(this.startTime && this.endTime) {
                if(new Date(this.startTime).getTime() < new Date(this.endTime).getTime()) {
                  var startTime = this.startTime
                  var endTime = this.endTime
                } else {
                  var startTime = this.endTime
                  var endTime = this.startTime
                }
              }
              var vm = this
              vm.isLoading = true
              vm.loadingStatus = 1
              var data={
                fromTime: new Date(startTime + ' 00:00:00').getTime(),
                toTime: new Date(endTime + ' 23:59:59').getTime(),
                operationStatus: 6,
                storeId: vm.storeId,
                pageNo: vm.pageNo,
                pageCount: 10
              }
              console.log(JSON.stringify(data))
              config.ajax({
                url: '/delivery/checkoperation',
                data: {
                  fromTime: new Date(startTime + ' 00:00:00').getTime(),
                  toTime: new Date(endTime + ' 23:59:59').getTime(),
                  operationStatus: 6,
                  storeId: vm.storeId,
                  pageNo: vm.pageNo,
                  pageCount: 10
                },
                success: function(res) {
                  if(res.result === 1) {
                    vm.pageTotal = res.operations.pageTatol
                    if(vm.pageNo === 1) {
                      vm.pageList = res.operations.data
                    } else {
                      vm.pageList = vm.pageList.concat(res.operations.data)
                    }
                     vm.isLoading = false
              			 vm.loadingStatus = 0
                  } else {
                  	vm.isLoading = false
                  	vm.loadingStatus = 0
                    mui.toast(res.errormsg)
                  }
                }
              })
            },
            storeDetail:function(item){
            	mui.openWindow({
              url: 'history-detail.html',
              id: 'history-detail',
              styles: {
                titleNView: {
                  titleText: vm.currentShopObj.storeName + '收货历史',
                  titleColor: "#FFFFFF",
                  titleSize: "17px",
                  backgroundColor: "#FF6800",
                  autoBackButton: true,
                  buttons: [{
                    fontWeight: 'normal',
                    fontSize: '18px',
                    float: 'right',
                    fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
                    text: "\ue602",
                    onclick: function() {
                      var allPage = plus.webview.all()
                      var nowPage = plus.webview.getWebviewById('index')
                      for(var i = 0; i < allPage.length; i++) {
                        if(allPage[i].getURL() !== nowPage.getURL()) {
                          plus.webview.close(allPage[i]);
                        }
                      }
                    }
                  }],
                  splitLine: {
                    color: "#CCCCCC",
                    height: "1px"
                  }
                }
              },
              extras: {
                currentShopObj: vm.currentShopObj,
                operationId: item.operationId,
              }
            });
            }
          }
        })
    </script>
  </body>

</html>